<template>
  <div id="login-container">
    <h1 class="h2 text-light text-center push-top-bottom animation-slideDown">
      <i class="fa fa-cube"></i> <strong>欢迎来到机惠网后台</strong>
    </h1>
    <div class="block animation-fadeInQuickInv">

      <div class="block-title">
        <div class="block-options pull-right">
        </div>
        <h2>请登录</h2>
      </div>
      <form id="form-login" action="" method="post" class="form-horizontal" novalidate="novalidate">
        <div class="form-group">
          <div class="col-xs-12">
            <input type="text" v-model.trim="loginInfo.name" name="login-email" @input="$v.loginInfo.name.$touch()"
                   class="form-control"
                   placeholder="请填写登录账号...">
            <span v-if="!$v.loginInfo.name.required">亲填写登录账号！！</span>
            <span v-if="!$v.loginInfo.name.minLength">账号为注册的手机号11位！！</span>
          </div>
        </div>
        <div class="form-group">
          <div class="col-xs-12">
            <input type="password" v-model.trim="loginInfo.password" @input="$v.loginInfo.password.$touch()"
                   class="form-control"
                   placeholder="请填写密码...">
            <span v-if="!$v.loginInfo.password.required">请填写密码！！</span>
            <span v-if="!$v.loginInfo.password.minLength">密码至少6位数！！</span>
          </div>
        </div>
        <div class="form-group form-actions">
          <div class="col-xs-8">
            <label class="csscheckbox csscheckbox-primary">
              <input type="checkbox" v-model="loginInfo.remember">
              <span></span>
            </label>
            记住密码
          </div>
          <div class="col-xs-4 text-right">
            <button type="button" class="btn btn-effect-ripple btn-sm btn-primary"
                    style="overflow: hidden; position: relative;" @click="login($v.loginInfo)">
              <i class="fa fa-check"></i> 登录
            </button>
          </div>
        </div>
      </form>

    </div>
    <footer class="text-muted text-center animation-pullUp">
      <small><span id="year-copy">{{year}}</span> © <a href="javascript:void(0)" target="_blank">{{desc}}</a></small>
    </footer>
    <transition mode="out-in" name="loading">
      <loading v-if="loadAt"></loading>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6">
  require('../../static/plugins/pages/readyLogin');
  import moment from 'moment';
  import vuelidate from 'vuelidate';
  import http from '../../static/http/http';
  import {required, minLength, between, email} from 'vuelidate/lib/validators';
  import lockr from 'lockr';
  import {mapState, mapMutations} from 'vuex';
  import loading from '../../components/comment/loading/loading';
  import  {EXP_TIME,LOGIN_TIMEOUT} from '../../static/comm/commConfig';
  const ERROR_CODE = 1001;
  export default{
    created(){
      //判断是否过期
      this.judgeRemember();
    },
    data(){
      return {
        year: '2014-' + moment().format('YY'),
        desc: '版权所有机惠网',
        loginInfo: {
          remember: false,
          name: '',
          password: '',
        }
      }
    }, computed: {
      ...mapState({
        loadAt: 'loading',
        userAt: 'userInfo'
      })
    },
    validations: {
      loginInfo: {
        name: {
          required,
          minLength: minLength(11)
        },
        password: {
          required,
          minLength: minLength(6)
        }
      }
    },
    methods: {
      login($v){
        $v.$touch();
        let result = $v.$error;
        if (true === result) {
          return result;
        }
        this.set_loadAt({code: 100, meta: true, custom_info: '正在努力登录中....'});
        this.apiPost(`/api/admin/login/login`, this.loginInfo).then((response) => {
          let code = response.data.status;
          let UserInfo = response.data.list;
          if (code === ERROR_CODE) {
            // 如果失败了那么我们还是的对我们的错误进程处理错误机制处理待完善
            this.set_loadAt({code: 102, meta: false});
          } else {
            this.$nextTick((response_index) => {
              let exp = new Date().getTime() + LOGIN_TIMEOUT; //  储存在localStoreGe
              this.loginInfo = {...UserInfo};
              this.rememberMe(UserInfo);
              UserInfo.expire             =  exp;             //  检查当前是登录否过期
              this.set_userAt({info: UserInfo});
              if (!this.$route.query.jump) {
                this.$router.push({name: 'home'})
              } else {
                this.$router.push({path: this.$route.query.jump})
              }
            })
          }
        }).catch((response) => {
          // 如果失败了那么我们还是的对我们的错误进程处理错误机制处理待完善
          this.set_loadAt({code: 102, meta: false});
        })
      }, rememberMe(UserInfo){
        //是否记住
        if (true === this.loginInfo.remember && !lockr.get('loginInfo')) {
          let exp = new Date().getTime() + EXP_TIME; //储存在localStoreGe
          lockr.set('loginInfo', {data: JSON.stringify(UserInfo), expiration: exp});
        }
        // 不记住密码
        if (false === this.loginInfo.remember) {
          lockr.rm('loginInfo');
        }
      }, judgeRemember(){
        lockr.rm('authKey');
        lockr.rm('sessionId');
        if (!lockr.get('loginInfo')) {
          return false;
        }
        let expTime = (lockr.get('loginInfo')).expiration;
        let expOutTime = ((new Date().getTime())-expTime) <= 0 ? true : false;
        if (true === expOutTime) {
          let data = JSON.parse((lockr.get('loginInfo')).data);
          this.loginInfo = {...data};
          return false;
        }
        return lockr.rm('loginInfo');
      }, ...mapMutations({
        set_loadAt: 'set_loading',
        set_userAt: 'userInfo',
      })
    }, mixins: [http], components: {loading}
  }
</script>
<style type="stylus" scoped>
  .loading-enter-active, .loading-leave-active {
    transition: all .4s;
  }

  .loading-enter, .loading-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
</style>

